<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>订单</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../css/icons-extra.css" />
		<link rel="stylesheet" href="../css/iconfont.css" />

		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/app.css" type="text/css">
		<link rel="stylesheet" href="../css/main.css" />
		<!--<link rel="stylesheet" href="../css/scroll_style.css" />-->
		<link rel="stylesheet" href="../plugs/qs/qs.common.css" />

		<style>
			body,
			ul,
			li {
				padding: 0;
				margin: 0;
				border: 0;
			}
			
			body {
				overflow: hidden;
			}
			
			.mui-slider-indicator.mui-segmented-control {
				background-color: #FFFFFF;
				height: 55px;
				text-align: center;
				padding-top: 10px;
			}
			
			.mui-bar.mui-content .mui-fullscreen {
				top: 44px;
				height: auto;
			}
			
			.mui-pull-top-tips {
				position: absolute;
				top: -20px;
				left: 50%;
				margin-left: -25px;
				width: 40px;
				height: 40px;
				border-radius: 100%;
				z-index: 1;
			}
			
			.mui-bar.mui-pull-top-tips {
				top: 24px;
			}
			
			.mui-pull-top-wrapper {
				width: 42px;
				height: 42px;
				display: block;
				text-align: center;
				background-color: #efeff4;
				border: 1px solid #ddd;
				border-radius: 25px;
				background-clip: padding-box;
				box-shadow: 0 4px 10px #bbb;
				overflow: hidden;
			}
			
			.mui-pull-top-tips.mui-transitioning {
				-webkit-transition-duration: 200ms;
				transition-duration: 200ms;
			}
			
			.mui-pull-top-tips .mui-pull-loading {
				/*-webkit-backface-visibility: hidden;
				-webkit-transition-duration: 400ms;
				transition-duration: 400ms;*/
				margin: 0;
			}
			
			.mui-pull-top-wrapper .mui-icon,
			.mui-pull-top-wrapper .mui-spinner {
				margin-top: 7px;
			}
			
			.mui-pull-top-wrapper .mui-icon.mui-reverse {
				/*-webkit-transform: rotate(180deg) translateZ(0);*/
			}
			
			.mui-pull-bottom-tips {
				text-align: center;
				background-color: #efeff4;
				font-size: 15px;
				line-height: 40px;
				color: #777;
			}
			
			.mui-pull-top-canvas {
				overflow: hidden;
				background-color: #fafafa;
				border-radius: 40px;
				box-shadow: 0 4px 10px #bbb;
				width: 40px;
				height: 40px;
				margin: 0 auto;
			}
			
			.mui-pull-top-canvas canvas {
				width: 40px;
			}
			
			.mui-segmented-control.mui-scroll-wrapper .mui-scroll {
				width: 100%;
			}
			
			.mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item {
				border: 0;
				margin-top: 18px;
			}
			
			.mui-table-view .mui-media-object {
				line-height: 42px;
				max-width: 130px;
				height: 100px;
			}
			
			.doctor {
				color: #FFE5CC;
			}
			
			.mui-ellipsis {
				overflow: hidden;
				white-space: normal;
				text-overflow: ellipsis;
				font-weight: bold;
			}
			
			.tableUL {
				margin-top: 0.08rem;
			}
			
			.mui-badge {
				font-size: 12px;
				line-height: 1;
				display: inline-block;
				padding: 6px 9px;
				color: #FFFFFF;
				border-radius: 8px;
				background-color: #66cc99;
				width: 55px;
				/*background-color: rgba(0, 0, 0, .15);*/
			}
			
			.mui-badge-huise {
				color: #FFFFFF;
				background: rgba(0, 0, 0, .15);
				background-color: #aeaeae;
				width: 72px;
				margin-left: 6px;
				text-align: center;
			}
			
			.mui-badge-huise1 {
				color: #FFFFFF;
				background: rgba(0, 0, 0, .15);
				background-color: #aeaeae;
				width: 70px;
				text-align: center;
				margin-left: 6px;
			}
			
			.mui-badge-red {
				color: #FFFFFF;
				background: #ff9900;
			}
			
			.mui-badge-green {
				color: #FFFFFF;
				background: #ff0000;
			}
			
			.mui-badge-green2 {
				color: #FFFFFF;
				background: #669966;
			}
			
			.mui-col-xs-8 {
				width: 70%;
			}
			
			.mui-col-xs-4 {
				width: 33%;
			}
			
			@media screen and (min-width: 320px) {
				.mui-col-xs-8 {
					width: 60%;
				}
				.mui-col-xs-4 {
					width: 33%;
					text-align: right;
				}
			}
			
			@media screen and (min-width: 400px) {
				.mui-col-xs-8 {
					width: 60%;
				}
				.mui-col-xs-4 {
					width: 33%;
					text-align: right;
				}
				.mui-col-xs-10 {
					width: 60%;
				}
			}
			
			.mui-fullscreen .mui-segmented-control~.mui-slider-group {
				top: 40px;
			}
			
			.widthdaxiao {
				width: 15%;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar {
				background-color: #40ccd2;
			}
			
			.mui-segmented-control {
				font-size: 0.28rem;
				font-weight: 400;
				position: relative;
				display: table;
				overflow: hidden;
				width: 100%;
				table-layout: fixed;
				border: 1px solid #007aff;
				border-radius: 3px;
				background-color: transparent;
				-webkit-touch-callout: none;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				color: #40ccd2;
				font-weight: bold;
				font-size: 0.28rem;
			}
			
			.cus_title_01 {
				color: #EFEFEF;
				/*font-weight: 500;*/
				background-color: #aab940;
				border-radius: 0 10px 10px 0;
				padding: 10px 15px 10px 15px;
				margin-left: -15px;
			}
			
			.cus_title_02 {
				color: #EFEFEF;
				font-weight: 500;
				background-color: #91a9cd;
				border-radius: 0 10px 10px 0;
				padding: 10px 15px 10px 15px;
				margin-left: -15px;
			}
			
			b,
			strong {
				font-weight: 700;
				font-size: 0.26rem;
				color: #000;
			}
			
			span {
				font-size: 0.28rem;
			}
			
			.mui-table-view {
				width: 75%;
			}
			
			.mui-table-view-left {
				width: 25%;
			}
			
			.mui-table-view-left img {
				width: 100%;
			}
			
			.mui-table-view-cus {
				width: 100%;
			}
			
			.clear_float {
				overflow: hidden;
				width: 100%;
			}
			
			.left {
				float: left;
			}
			
			.mui-table-view-cell {
				width: 100%;
			}
			
			.mui-table-vieww {
				width: 100%;
			}
			
			.mui-table-vieww-cell {
				width: 100%;
				border-bottom: 1px solid #eeeeee;
				height: 0.8rem !important;
				padding-top: 2%;
				padding-left: 4%;
			}
			
			.kuan_one {
				padding: 15px 15px;
			}
			
			.kuan_two {
				width: 100%;
			}
			
			.dot_qiangdan_dot {
				float: left;
				height: 195px;
				background-color: #fff;
			}
			
			.baby_service {
				width: 10% !important;
			}
			
			.clear_float_top {
				border-bottom: 8px solid #eeeeee!important;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted .mui-active {
				color: #31569d !important;
				font-weight: bold;
				font-size: 0.28rem;
			}
			
			.black_tip {
				color: #000;
			}
			
			.let_go img {
				width: 27% !important;
				display: inline-block !important;
				margin-left: 5%;
			}
			
			.clear_float_top_one {
				background-color: #fff;
			}
			
			.half_one {
				color: #aab940;
				font-size: 0.28rem;
				margin-left: 10px;
				padding-top: 20% !important;
			}
			
			.peixun_one {
				height: 0.7rem;
				width: 1.4rem;
				line-height: 0.7rem;
				background-color: #fba94f;
				color: #fff;
				text-align: center;
				border-radius: 5px 5px;
				margin-left: 10px;
				margin-top: 20% !important;
			}
			
			.yingji_one {
				height: 0.7rem;
				width: 1.4rem;
				line-height: 0.7rem;
				background-color: #fba94f;
				color: #fff;
				text-align: center;
				border-radius: 5px 5px;
				margin-left: 10px;
				margin-top: 30% !important;
			}
			
			.baifen_one {
				width: 100% !important;
			}
			
			.time_title_one01 {
				text-align: center;
				height: 0.6rem;
				background-color: #aab940;
				border-radius: 0 14px 14px 0;
			}
			
			.time_title_one02 {
				text-align: center;
				height: 0.6rem;
				background-color: #aab940;
				border-radius: 0 14px 14px 0;
			}
			
			.clear_float_top_one {
				border-bottom: 8px solid #eeeeee;
			}
			
			.mui-table-view-cell.mui-active {
				background-color: #fff
			}
			
			.beaty {
				padding-left: 3%;
			}
			
			.mui-slider .mui-slider-group .mui-slider-item img {
				max-width: 60%;
				margin: 0 auto;
				display: table;
				padding-top: 30px;
			}
		</style>
	</head>

	<body onload="loaded()">
		<div id="refreshContainer" class="mui-content">
			<div id="slider" class="mui-slider mui-fullscreen">
				<div id="sliderSegmentedOrderControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item mui-active" href="#item2order" id="mainItem2">
						待确认
					</a>
					<a class="mui-control-item" href="#item3order" id="mainItem3">
						待服务
					</a>
					<a class="mui-control-item" href="#item4order" id="mainItem4">
						已完成
					</a>
				</div>

				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>

				<div class="mui-slider-group">
					<div id="item2order" class="mui-slider-item mui-control-content">
						<div id="item2wrapper" class="mui-scroll-wrapper">
							<div id="wrapper01" class="wrapper">
								<div id="scroller" class="scroller">
									<div id="pullDown" class="pullDown ub ub-pc c-gra">
										<div class="pullDownIcon"></div>
										<div class="pullDownLabel">下拉刷新</div>
									</div>
									<div id="waitConfimBillDiv">
										<p><img src="../images/no_data/1-02.png" data-preview-src="" data-preview-group="1"></p>
									</div>
									<div id="pullUp" class="pullUp ub ub-pc c-gra">
										<div class="pullUpIcon"></div>
										<div class="pullUpLabel">上拉显示更多...</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div id="item3order" class="mui-slider-item mui-control-content">
						<div id="item3wrapper" class="mui-scroll-wrapper">
							<div id="wrapper02" class="wrapper">
								<div id="scroller" class="scroller">
									<div id="pullDown" class="pullDown ub ub-pc c-gra">
										<div class="pullDownIcon"></div>
										<div class="pullDownLabel">下拉刷新</div>
									</div>
									<div id="waitServiceBillDiv">
										<p><img src="../images/no_data/1-02.png" data-preview-src="" data-preview-group="1"></p>
									</div>
									<div id="pullUp" class="pullUp ub ub-pc c-gra">
										<div class="pullUpIcon"></div>
										<div class="pullUpLabel">上拉显示更多...</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div id="item4order" class="mui-slider-item mui-control-content">
						<div id="item4wrapper" class="mui-scroll-wrapper">
							<div id="wrapper03" class="wrapper">
								<div id="scroller" class="scroller">
									<div id="pullDown" class="pullDown ub ub-pc c-gra">
										<div class="pullDownIcon"></div>
										<div class="pullDownLabel">下拉刷新</div>
									</div>
									<div id="endBillDiv">
										<p><img src="../images/no_data/1-02.png" data-preview-src="" data-preview-group="1"></p>
									</div>
									<div id="pullUp" class="pullUp ub ub-pc c-gra">
										<div class="pullUpIcon"></div>
										<div class="pullUpLabel">上拉显示更多...</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		</div>
	</body>
	<script src="../js/mui.min.js"></script>
	<script src="../js/app.js"></script>
	<script src="../js/mui.pullToRefresh.js"></script>
	<script src="../js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="../js/constants.js"></script>
	<script type="text/javascript" src="../js/sharemethods.js"></script>
	<script type="text/javascript" src="../js/constants.map.js"></script>
	<script type="text/javascript" src="../js/xiangyingshi.js"></script>

	<script type="text/javascript" src="../plugs/moment/moment.min.js"></script>
	<script type="text/javascript" src="../plugs/art/template-web.js"></script>
	<script type="text/javascript" src="../plugs/qs/qs.art.extend.js"></script>
	<script type="text/javascript" src="../plugs/qs/qs.template.js"></script>
	<script type="text/javascript" src="../plugs/iscroll/iscroll-probe.js"></script>
	<script type="text/javascript" src="../plugs/qs/qs.iscroll.js"></script>

	<script>
		var waitConfimBillPage = 1;
		var waitServiceBillPage = 1;
		var endBillPage = 1;

		var waitConfimBillLimit = 5;
		var waitServiceBillLimit = 5;
		var endBillLimit = 5;

		var userId = null;
		var accessToken = null;

		var wrapper01;
		var wrapper02;
		var wrapper03;

		var wrapper01flag = true;
		var wrapper02flag = true;
		var wrapper03flag = true;

		mui.init({
			swipeBack: true //启用右滑关闭功能
		});

		var refWaitService = function() {
			$("#waitServiceBillDiv").html('<p><img src="../images/no_data/1-02.png" data-preview-src="" data-preview-group="1"></p>')
			waitServiceBillPage = 1;
			pullDownServiceAction(wrapper01)
		}

		var refConfimService = function() {
			$("#waitConfimBillDiv").html('<p><img src="../images/no_data/1-02.png" data-preview-src="" data-preview-group="1"></p>')
			waitConfimBillPage = 1;
			pullDownConfimAction(wrapper01)
		}

		mui.plusReady(function() {
			userId = localStorage.getItem("USERID");
			accessToken = localStorage.getItem("ACCESSTOKEN");
		});

		mui(".mui-content").on("tap", ".mui-confirm-button-confim", function() {
			var orderId = $(this).attr("data-id");
			mui.openWindow({
				url: '../order/confim_service_order_detail.html',
				id: 'order/confim_service_order_detail.html',
				extras: {
					orderId: orderId
				},
				show: {
					autoShow: true, //页面loaded事件发生后自动显示，默认为true
				},
				waiting: {
					autoShow: true, //自动显示等待框，默认为true
					title: '正在加载...', //等待对话框上显示的提示内容
				}
			});
		});
		mui(".mui-content").on("tap", ".mui-confirm-button", function() {
			var orderId = $(this).attr("data-id");
			mui.openWindow({
				url: '../order/wait_service_order_detail.html',
				id: 'wait_service_order_detail',
				extras: {
					orderId: orderId
				},
				show: {
					autoShow: true, //页面loaded事件发生后自动显示，默认为true
				},
				waiting: {
					autoShow: true, //自动显示等待框，默认为true
					title: '正在加载...', //等待对话框上显示的提示内容
				}
			});
		});
		mui(".mui-content").on("tap", ".mui-confirm-button-end", function() {
			var orderId = $(this).attr("data-id");
			mui.openWindow({
				url: '../order/end_service_order_detail.html',
				id: 'order/end_service_order_detail.html',
				extras: {
					orderId: orderId
				},
				show: {
					autoShow: true, //页面loaded事件发生后自动显示，默认为true
				},
				waiting: {
					autoShow: true, //自动显示等待框，默认为true
					title: '正在加载...', //等待对话框上显示的提示内容
				}
			});
		});
		document.querySelector('.mui-slider').addEventListener('slide', function(event) {
			var nm = mui("#slider").slider().getSlideNumber()
			if(nm == '0') {
				if(!wrapper01flag) {
					return;
				}
				wrapper01flag = false;
				waitConfimBillPage = 1;
				pullDownConfimAction(wrapper01)
			} else if(nm == '1') {
				if(!wrapper02flag) {
					return;
				}
				wrapper02flag = false;
				waitServiceBillPage = 1;
				pullDownServiceAction(wrapper02)
			} else if(nm == '2') {
				if(!wrapper03flag) {
					return;
				}
				wrapper03flag = false;
				endBillPage = 1;
				pullDownEndAction(wrapper03)
			}
		});

		mui("#waitServiceBillDiv").on("tap", ".mui-return-button", function() {
			var url = backorderUrl + this.id;
			var sussess = function(data) {
				//服务器返回响应，根据响应结果，分析是否登录成功；
				if(data.result == "success") {
					mui.toast("退单成功");
					$("#waitServiceBillDiv").html('<p><img src="../images/no_data/1-02.png" data-preview-src="" data-preview-group="1"></p>');
					waitServiceBillPage = 1;
					getWaitServiceBillData(homepage);
				} else {
					mui.toast(data.msg);
				}
			};
			commonHttpUtils(url, "put", {
				id: userId
			}, sussess, error);
		});

		function processConfimAction(myScroll, flag) {
			setTimeout(function() {
				var homeurl = showwaitconfirmedlistUrl + "?page=" + waitConfimBillPage + "&limit=" + waitConfimBillLimit;
				if(waitConfimBillPage == 1) {
					$("#waitConfimBillDiv").html('<p><img src="../images/no_data/1-02.png" data-preview-src="" data-preview-group="1"></p>');
				}
				var sussess = function(data) {
					if(data.result == "success") {
						if(data.obj.orders.length != 0) {
							if(waitConfimBillPage == 1) {
								$("#waitConfimBillDiv").html('')
							}
							if(data.obj.orders.length == waitConfimBillLimit) {
								waitConfimBillPage = waitConfimBillPage + 1;
								myScroll.upFlag = true
							} else {
								myScroll.upFlag = false
							}
							$("#waitConfimBillDiv").processTL(templateRegister.orderListConfim, {
								sub: data.obj.orders
							}, 'append', function() {
								if(flag) {
									$.resetPullDown(myScroll);
								} else {
									$.resetPullUp(myScroll);
								}
							})
						}
					} else {
						mui.toast(data.msg);
					}
				};
				var error = function(xhr, type, errorThrown) {
					mui.toast("服务器错误，请稍后再试！");
					if(flag) {
						$.resetPullDown(myScroll);
					} else {
						$.resetPullUp(myScroll);
					}
				}
				commonHttpUtils(homeurl, "get", "", sussess, error);
			}, 1000); //1秒  
		}
		var pullDownConfimAction = function(myScroll) { //下拉事件
			waitConfimBillPage = 1;
			processConfimAction(myScroll, true)
		}
		var pullUpConfimAction = function(myScroll) { //上拉事件  
			processConfimAction(myScroll, false)
		}

		function processServiceAction(myScroll, flag) {
			setTimeout(function() {
				var homeurl = showwaitservicelistUrl + "?page=" + waitServiceBillPage + "&limit=" + waitServiceBillLimit;
				if(waitServiceBillPage == 1) {
					$("#waitServiceBillDiv").html('<p><img src="../images/no_data/1-02.png" data-preview-src="" data-preview-group="1"></p>');
				}
				var sussess = function(data) {
					//服务器返回响应，根据响应结果，分析是否登录成功；
					if(data.result == "success") {
						if(data.obj.orders.length != 0) {
							if(waitServiceBillPage == 1) {
								$("#waitServiceBillDiv").html('')
							}
							if(data.obj.orders.length == waitServiceBillLimit) {
								waitServiceBillPage = waitServiceBillPage + 1;
								myScroll.upFlag = true
							} else {
								myScroll.upFlag = false
							}
							$("#waitServiceBillDiv").processTL(templateRegister.orderListWait, {
								sub: data.obj.orders
							}, 'append', function() {
								if(flag) {
									$.resetPullDown(myScroll);
								} else {
									$.resetPullUp(myScroll);
								}
							})
						}
					}
				};
				var error = function(xhr, type, errorThrown) {
					mui.toast("服务器错误，请稍后再试！");
					if(flag) {
						$.resetPullDown(myScroll);
					} else {
						$.resetPullUp(myScroll);
					}
				}
				commonHttpUtils(homeurl, "get", "", sussess, error);

			}, 1000); //1秒  
		}

		var pullDownServiceAction = function(myScroll) { //下拉事件
			waitServiceBillPage = 1;
			processServiceAction(myScroll, true)
		}
		var pullUpServiceAction = function(myScroll) { //上拉事件  
			processServiceAction(myScroll, false)
		}

		function processEndAction(myScroll, flag) {
			setTimeout(function() {
				var homeurl = showendservicelistUrl + "?page=" + endBillPage + "&limit=" + endBillLimit;
				if(endBillPage == 1) {
					$("#endBillDiv").html('<p><img src="../images/no_data/1-02.png" data-preview-src="" data-preview-group="1"></p>');
				}
				var sussess = function(data) {
					//服务器返回响应，根据响应结果，分析是否登录成功；
					if(data.result == "success") {
						if(data.obj.orders.length != 0) {
							if(endBillPage == 1) {
								$("#endBillDiv").html('')
							}
							if(data.obj.orders.length == endBillLimit) {
								endBillPage = endBillPage + 1;
								myScroll.upFlag = true
							} else {
								myScroll.upFlag = false
							}
							$("#endBillDiv").processTL(templateRegister.orderListEnd, {
								sub: data.obj.orders
							}, 'append', function() {
								if(flag) {
									$.resetPullDown(myScroll);
								} else {
									$.resetPullUp(myScroll);
								}
							})
						}
					} else {
						mui.toast(data.msg);
					}
				};
				var error = function(xhr, type, errorThrown) {
					mui.toast("服务器错误，请稍后再试！");
					if(flag) {
						$.resetPullDown(myScroll);
					} else {
						$.resetPullUp(myScroll);
					}
				}
				commonHttpUtils(homeurl, "get", "", sussess, error);

			}, 1000); //1秒  
		}
		var pullDownEndAction = function(myScroll) { //下拉事件
			endBillPage = 1;
			processEndAction(myScroll, true)
		}
		var pullUpEndAction = function(myScroll) { //上拉事件  
			processEndAction(myScroll, false)
		}

		function loaded() {
			wrapper01 = $.initIscroll({
				id: "wrapper01",
				pullUpAction: pullUpConfimAction,
				pullDownAction: pullDownConfimAction
			});
			wrapper02 = $.initIscroll({
				id: "wrapper02",
				pullUpAction: pullUpServiceAction,
				pullDownAction: pullDownServiceAction
			});
			wrapper03 = $.initIscroll({
				id: "wrapper03",
				pullUpAction: pullUpEndAction,
				pullDownAction: pullDownEndAction
			});
			initFunction();
		}

		var initFunction = function() {
			$('#item2order').addClass('mui-active')
			pullDownConfimAction(wrapper01);
		}

		//document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);  

		document.addEventListener('touchmove', function(e) {
			e.preventDefault();
		}, isPassive() ? {
			capture: false,
			passive: false
		} : false);

		function isPassive() {
			var supportsPassiveOption = false;
			try {
				addEventListener("test", null, Object.defineProperty({}, 'passive', {
					get: function() {
						supportsPassiveOption = true;
					}
				}));
			} catch(e) {}
			return supportsPassiveOption;
		}
	</script>

</html>